Multi-series চার্ট তৈরি করা

Web Development - অ্যাঙ্গুলার হাই চার্ট (Angular High Charts) - উন্নত চার্ট অপশনসমূহ |
1
1

Multi-series Chart হলো একটি চার্ট যেখানে একাধিক ডেটা সিরিজ একসাথে প্রদর্শিত হয়। এটি ব্যবহৃত হয় যখন একাধিক ভিন্ন ভিন্ন ডেটা সিরিজের তুলনা করতে হয়, যেমন বিভিন্ন ক্যাটেগরির বা গ্রুপের মধ্যে তুলনা। Multi-series চার্ট সাধারণত Line Chart, Bar Chart, বা Column Chart এর রূপে তৈরি করা হয়।

Highcharts বা Angular সহ যেকোনো প্ল্যাটফর্মে Multi-series Chart তৈরি করার প্রক্রিয়া প্রায় একই। এখানে আমরা একটি সাধারণ Line Chart এর উদাহরণ দিয়ে Multi-series Chart তৈরি করার প্রক্রিয়া দেখাব।


Highcharts দিয়ে Multi-series Line Chart তৈরি করা

Highcharts একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি, যা ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহৃত হয়। Highcharts দিয়ে Multi-series Line Chart তৈরি করতে আপনি একাধিক ডেটা সিরিজ (series) যোগ করতে পারেন।

1. Highcharts লাইব্রেরি ইনস্টল করা

প্রথমে, Highcharts ইনস্টল করতে হবে:

npm install highcharts

2. Angular এ Highcharts ইন্টিগ্রেশন

Highcharts Angular র‍্যাপার ব্যবহার করার জন্য, আপনাকে Highcharts Angular র‍্যাপার ইনস্টল করতে হবে:

npm install highcharts-angular

এরপর, আপনার অ্যাপ মডিউলে Highcharts মডিউলটি ইমপোর্ট করতে হবে:

import { HighchartsChartModule } from 'highcharts-angular';

আপনি আপনার app.module.ts ফাইলে এটি যোগ করতে পারেন:

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HighchartsChartModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

3. Multi-series Chart তৈরি করা

এখন, আপনি app.component.ts ফাইলে একটি Multi-series Line Chart তৈরি করতে পারেন। উদাহরণস্বরূপ:

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    chart: {
      type: 'line' // Line chart type
    },
    title: {
      text: 'Multi-series Line Chart'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
      title: {
        text: 'Values'
      }
    },
    series: [
      {
        name: 'Product A',
        data: [5, 8, 3, 4, 7, 2, 9, 3, 6, 10, 4, 5]
      },
      {
        name: 'Product B',
        data: [2, 4, 5, 7, 3, 9, 2, 6, 7, 3, 5, 4]
      },
      {
        name: 'Product C',
        data: [3, 6, 2, 5, 8, 7, 3, 9, 4, 6, 3, 5]
      }
    ]
  };
}

4. HTML টেমপ্লেট

app.component.html ফাইলে Highcharts চার্টটি ডিসপ্লে করার জন্য নিচের কোড ব্যবহার করুন:

<div style="height: 400px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

ব্যাখ্যা:

  • chart.type: এখানে 'line' বলা হয়েছে, কারণ আমরা একটি লাইন চার্ট তৈরি করতে চাই।
  • xAxis.categories: এখানে মাসের নামগুলো দিয়ে আমরা x-অ্যাক্সিসের ক্যাটেগরি সেট করেছি।
  • series: এই অংশে একাধিক সিরিজ যুক্ত করা হয়েছে। এখানে Product A, Product B, এবং Product C তিনটি সিরিজ রয়েছে, এবং প্রতিটি সিরিজের জন্য আলাদা ডেটা দেয়া হয়েছে।

সারাংশ

Highcharts ব্যবহার করে Multi-series Line Chart তৈরি করা খুবই সহজ। একাধিক ডেটা সিরিজ যোগ করে আপনি বিভিন্ন গ্রুপ বা ক্যাটেগরির মধ্যে তুলনা করতে পারেন। Angular অ্যাপ্লিকেশনে Highcharts ইন্টিগ্রেশন করে আপনি অত্যন্ত ইন্টারঅ্যাকটিভ এবং ডাইনামিক চার্ট তৈরি করতে পারবেন। Multi-series Chart বিভিন্ন সময়ে বা শর্তে ডেটার বিভিন্ন ধারার তুলনা দেখাতে কার্যকর।

Content added By
Promotion